<template>
  <div class="outer">
    <div class="content">
      <div class="header">
        <div class="left">
          <div class="logo" style="margin-right: 20px">
            <el-avatar :size="80" :src="all.logo" />
          </div>
          <div class="message">
            <div class="title">
              <div class="companyName">{{ all.companyName }}</div>
            </div>
            <div class="information">
              <ul>
                <li style="display: flex">
                  {{ all.financingStage }}
                </li>
                <li style="display: flex">
                  {{ all.companySize }}
                </li>
                <li style="display: flex">
                  {{ all.industryType }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="right" style="display: flex">
          <div class="recruiting">{{ jobListCount }}</div>
          <span style="margin-top: 11px; margin-left: 5px">在招职位</span>
        </div>
      </div>
      <div class="position">
        <div class="jobOpening" style="margin-bottom: 10px">招聘岗位</div>
        <div
          style="
            display: flex;
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
          "
        >
          <div
            class="jobopening-posts"
            v-for="(item, index) in allpost"
            :key="index"
            @click="toDetail(item.id)"
          >
            <div class="posts">
              <div class="posts-top">
                <div class="job-title">{{ item.positionName }}</div>
                <div class="salary">{{ item.salary }}</div>
              </div>
              <div class="posts-bottom">
                <div class="tags">
                  <div class="tag">{{ item.experience }}</div>
                  <div class="tag">{{ item.education }}</div>
                </div>
                <div
                  class="job-place"
                  style="color: #666; font-size: 13px; margin-top: 10px"
                >
                  {{ item.city }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="company-introduction">
        <div class="introduction">公司介绍</div>
        <div class="introduction-content">
          {{ all.companyProfile }}
        </div>
        <div class="adddress">工作地址</div>
        <div style="width: 100%; height: 200px; margin-top: 10px">
          <Map />
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center; width: 100%">
      <el-pagination
        v-model:current-page="currentPage"
        :hide-on-single-page="true"
        :page-size="12"
        :size="size"
        :background="true"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { getjobPostings } from "@/api/attachmentResume";
import { getjobPostingDetailed } from "@/api/position";
import Map from "@/components/Map.vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { bus } from "@/utils/mitt";

//分页数据
const currentPage = ref(1);
const total = ref(0);
const size = ref<ComponentSize>("default");
const all = ref({});
const allpost = ref([]);
const route = useRoute();
const router = useRouter();
const jobListCount = ref(0);

//获取公司所有职位信息

//获取公司信息
const positionId = Number(route.query.id); // 获取查询参数 id
const getjobPostingdetail = async () => {
  const res = await getjobPostingDetailed(positionId);
  if (res.code === 200) {
    console.log("获取信息成功", res.data);
    all.value = res.data;
    getjobPosting();
  } else {
    ElMessage.error(res.msg);
  }
};
getjobPostingdetail();

//获取岗位信息
const latitudeAndLongitude = ref([]);
const getjobPosting = async () => {
  if (!all.value.id) {
    return;
  }
  const res = await getjobPostings(all.value.id, currentPage.value, 9);
  if (res.code === 200) {
    console.log("获取职位成功", res.data);
    latitudeAndLongitude.value = [
      res.data.list[0].longitude,
      res.data.list[0].latitude,
    ];
    bus.emit("latitudeAndLongitude", latitudeAndLongitude.value);
    bus.emit("companyAddress", res.data.list[0].adddress);
    allpost.value = res.data.list;
    total.value = res.data.total;
    jobListCount.value = allpost.value.length;
  } else {
    ElMessage.error(res.msg);
  }
};

//分页变化
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  getjobPosting();
};

//跳转到详情页
const toDetail = (id) => {
  console.log("跳转成功", id);
  router.push(`/position/jobDetails?id=${id}`);
};
</script>

<style lang="scss" scoped>
.outer {
  min-height: 90vh;
}

.content {
  width: 80%;
  margin-left: 10%;
}

.header {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left {
  display: flex;
  align-items: center;
}

.companyName,
.recruiting {
  font-size: 25px;
  font-weight: bold;
}

.information {
  display: flex;
}

.information ul {
  display: flex;
  flex-direction: row;
  font-size: 14px;
  padding-left: 0;
}

.information ul li {
  margin-right: 20px;
}

//招聘岗位
.jobopening-posts {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.posts {
  border: 1px solid #576f72;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 360px;
  height: 70px;
  padding: 20px;
  margin-right: 10px;
}

.posts:hover {
  border: 1px solid transparent;
  background: rgba(214, 153, 85, 0.1);
}

.posts-top,
.posts-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.job-title {
  font-size: 17px;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.job-info {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.salary {
  font-size: 20px;
  font-family: kanzhun-Regular, kanzhun;
  color: #fe574a;
}

.tags {
  display: flex;
  margin-top: 10px;
}

.tag {
  background: rgba(140, 169, 170, 0.5);
  color: #666;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 13px;
}

//公司简介
.company-introduction,
.position {
  margin-top: 10px;
  background-color: #f0ebe3;
  border-radius: 12px;
  padding: 20px;
}

.company-introduction .introduction,
.company-introduction .adddress,
.position .jobOpening {
  font-size: 20px;
  font-weight: bold;
}

.introduction-content {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
  color: #333;
}

.company-introduction .adddress {
  margin-top: 20px;
}
</style>